<template>
  <div class="same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>经营设置</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/rechargeCard' }"
              >充值卡</el-breadcrumb-item
            >
            <el-breadcrumb-item>充值卡编辑</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button
            class="same-search-btns same-search-export"
            @click="RefreshFun"
          >
            刷新
          </button>
          <button class="same-search-btns" @click="returnBack">返回</button>
        </div>
      </div>
    </div>
    <div class="recharge-main-box">
      <div class="main-title">基本信息</div>
      <div class="base-cell">
        <span>产品名称</span>
        <span>{{ card_name }}</span>
      </div>
      <div class="base-cell">
        <span>商品图</span>
        <el-image
          style="width: 100px; height: 100px"
          :src="card_img"
          fit="contain"
          :preview-src-list="[card_img]"
        >
        </el-image>
      </div>
      <div class="main-title mt-50">套餐信息</div>
      <div
        class="input-groups"
        v-for="(item, index) in priceList"
        :key="item.time"
      >
        <div class="input-price">
          <span>面值金额</span>
          <el-input
            type="number"
            v-model="item.card_money"
            clearable
            size="medium"
          />
        </div>
        <div class="input-price">
          <span>赠送金额</span>
          <el-input
            type="number"
            v-model="item.give_money"
            clearable
            size="medium"
          />
        </div>
        <div
          @click="handleClickIcon(index)"
          :class="[
            priceList.length - 1 == index && priceList.length < maxConfigNumber
              ? 'add-icon'
              : 'reduce-icon'
          ]"
        ></div>
      </div>

      <el-button class="submit-btn" @click="submit" size="medium" type="primary"
        >提 交</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "rechargeCardEdit",
  data() {
    return {
      maxConfigNumber: 6,
      priceList: [],
      card_img: "",
      card_name: ""
    };
  },
  inject: ["reload"],

  created() {
    this.id = this.$route.query.id;
    this.getRechargeCardInfo();
  },

  methods: {
    submit() {
      const list = this.priceList;
      let param = {};
      for (let x in list) {
        
        if (list[x].card_money === "") {
          this.$message.error(`第${parseInt(x) + 1}项面值金额未填写`);
          break;
        } else if (list[x].give_money==='') {
          this.$message.error(`第${parseInt(x) + 1}项赠送金额未填写`);
          break;
        }
        Object.assign(param, {
          [`money_${x}`]: {
            card_money: list[x].card_money,
            give_money: list[x].give_money
          }
        });
      }
      this.$post({
        url: "Partner/Recharge/setPackage",
        data: {
          rechagre_card_id: this.id,
          package: param
        },
        success: res => {
          if (res.code > 0) {
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message || "网络错误");
          }
        }
      });
    },

    getRechargeCardInfo() {
      this.$post({
        url: "Partner/Recharge/getCard",
        data: { id: this.id },
        success: res => {
          if (res.code == 1000) {
            let { card_name, card_img, package: packages } = res.data;
            this.card_img = card_img;
            this.card_name = card_name;
            let nPackages = Object.values(packages);
            if (nPackages.length > 0) {
              let nlist = [];
              for (let x in nPackages) {
                nlist.push({ ...nPackages[x], time: new Date().getTime() + x });
              }
              this.priceList = nlist;
            } else {
              this.priceList = [
                {
                  card_money: "",
                  give_money: "",
                  time: new Date().getTime()
                }
              ];
            }
          } else {
            this.$message.error(res.message || "网络错误");
          }
        }
      });
    },

    handleClickIcon(index) {
      let list = this.priceList;
      if (list.length - 1 == index && list.length < this.maxConfigNumber) {
        //add
        this.list = list.push({
          time: new Date().getTime(),
          card_money: "",
          give_money: ""
        });
      } else {
        this.list = list.splice(index, 1);
      }
      console.log(index);
    },

    RefreshFun() {
      this.reload();
    },
    returnBack() {
      this.$router.back(-1);
    }
  }
};
</script>

<style></style>

<style scoped>
.recharge-main-box {
  padding: 20px 40px 0;
}
.same-change-oldstyle .same-head-box {
  border-bottom: none;
}
.main-title {
  font-size: 16px;
  font-weight: bold;
  color: #323333;
  position: relative;
  padding-left: 10px;
}
.main-title::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 80%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #2c5586;
}

.base-cell {
  color: #323333;
  font-size: 15px;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}

.base-cell span:first-child {
  display: inline-block;
  min-width: 80px;
  padding-right: 20px;
}
.mt-50 {
  margin-top: 50px;
}
.input-groups {
  max-width: 660rpx;
}
.input-groups {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.input-price {
  display: flex;
  align-items: center;
  width: 260px;
  margin-right: 40px;
}

.input-price span {
  word-break: keep-all;
  padding-right: 20px;
}
.add-icon,
.reduce-icon {
  width: 26px;
  height: 26px;
  background: #2c5586;
  border-radius: 50%;
  position: relative;
}
.reduce-icon {
  background-color: #FF6565;
}
.add-icon::before,
.add-icon::after,
.reduce-icon::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  content: "";
}
.add-icon::before,
.reduce-icon::before {
  width: 16px;
  height: 2px;
}

.add-icon::after {
  width: 2px;
  height: 16px;
}

.submit-btn {
  margin-top: 30px;

}
</style>
